<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>提醒事项</title>
		<script src="js/vue.js"></script>
		<style>
			body {
				margin: 0;
				padding: 0;
				font-family: Arial, sans-serif;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100vh;
				background-color: #f4f4f4;
			}

			.app {
				width: 500px;
				min-height: 300px;
				border-radius: 8px;
				overflow: hidden;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				background-color: #fff;
			}

			.header {
				height: 120px;
				background-color: orange;
				padding: 20px;
				box-sizing: border-box;
			}

			.header h1 {
				margin: 0 0 10px;
				font-size: 24px;
				color: #fff;
				text-align: left;
			}

			.header .input-container {
				display: flex;
				align-items: center;
			}

			.header input[type="text"] {
				flex: 1;
				padding: 10px;
				border: 1px solid #ccc;
				border-radius: 4px;
				margin-right: 10px;
			}

			.header button {
				padding: 10px 20px;
				background-color: #fff;
				color: orange;
				border: 1px solid #ccc;
				border-radius: 4px;
				cursor: pointer;
			}

			.header button:hover {
				background-color: #f9f9f9;
			}

			.content {
				background-color: #f4f4f4;
				flex: 1;
				overflow-y: auto;
				padding: 10px;
				border-radius: 0 0 8px 8px;
			}

			.content .item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 10px 0;
				border-bottom: 1px solid #ddd;
			}

			.content .item:last-child {
				border-bottom: none;
			}

			.content .item .details {
				display: flex;
				align-items: center;
			}

			.content .item .details span:first-child {
				margin-right: 10px;
				font-weight: bold;
			}

			.content .item .buttons button {
				margin-left: 5px;
				padding: 5px 10px;
				background-color: #f0f0f0;
				border: 1px solid #ccc;
				border-radius: 4px;
				cursor: pointer;
			}

			.content .item .buttons button:hover {
				background-color: #e0e0e0;
			}
			.list-enter-from,.list-leave-to{
				transform: translateX(100px);
				opacity: 0;
			}
			.list-enter-active,.list-leave-active{
				transition: .5s;
			}
			.list-move{
				transition: .5s;
			}
		</style>
	</head>
	<body>
		<div class="app">
			<div class="header">
				<h1>提醒事项</h1>
				<div class="input-container">
					<input v-model="content" type="text" placeholder="输入提醒事项">
					<button @click="add">添加</button>
				</div>
			</div>
			<transition-group tag='div' name='list' class="content">
				<div class="item" v-for='(item,index) in list' :key='item'>
					<div class="details">
						<span>{{index+1}}.</span>
						<span>{{item}}</span>
					</div>
					<div class="buttons">
						<button @click="move(1,index)" v-if='index !=list.length-1'>下移</button>
						<button @click="move(2,index)" v-if='index !=0'>上移</button>
						<button @click="list.splice(index,1)">删除</button>
					</div>
				</div>

				<!-- 示例事项，实际使用时可根据需要动态生成 -->
			</transition-group>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						list: ["吃饭", "睡觉", "运动"],
						content: ''
					}
				},
				methods: {
					add() {
						if (this.content.length == 0) {
							alert('请输入提醒事项')
							return
						}
						//添加到最后一项
						this.list.push(this.content)
						//清空输入框
						this.content=''
					},
					move(type,i){
						if(type==1){
							//下
							this.list.splice(i+2,0,this.list[i])
							this.list.splice(i,1)
						}else{
							this.list.splice(i-1,0,this.list[i])
							this.list.splice(i+1,1)
						}
					}
				}
			}).mount('.app')
		</script>
	</body>
</html>